<!DOCTYPE html>
<html>
    
    <link rel="stylesheet" href="http://bootstrapvalidator.com/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrapvalidator.com/vendor/bootstrapvalidator/css/bootstrapValidator.min.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    

  
<body>

    <form id="tryitForm" class="form-horizontal">
        <div class="form-group has-feedback">
            <label class="control-label">Full name</label>
            <div>
                <input type="text" class="form-control" name="firstName" placeholder="First name">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-3 col-md-8">
                <button type="submit" class="btn btn-primary">Say hello</button>
            </div>
        </div>
    </form>
  
  <script src="dist/js/jquery-1.11.0.min.js"></script>
  <script src="dist/js/bootstrap.min.js"></script>  
  <script src="dist/bootstrapValidator/dist/js/bootstrapValidator.min.js"></script>  
<script>
$(document).ready(function() {
    $('#tryitForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                validators: {
                    notEmpty: {
                        message: 'The first name is required and cannot be empty'
                    }
                }
            },
            lastName: {
                validators: {
                    notEmpty: {
                        message: 'The last name is required and cannot be empty'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            }
        },
        submitHandler: function(validator, form, submitButton) {
            var fullName = [validator.getFieldElements('firstName').val(), validator.getFieldElements('lastName').val()].join(' ');
            $('#helloModal')
                .find('.modal-title').html('Hello ' + fullName).end()
                .modal();
        }
    });
});
</script>  
  </body>
</html>